<template>
  <scroll-view class="punch-wrapper" scroll-y="true">
    <view class="date-wrapper">
      <calendar
        :date="date"
        :show-month="false"
        :selected="puncheddate"
        @change="onDateChange"
        @pre="onDatePNChange"
        @next="onDatePNChange"
      />
    </view>
    <view class="punch-list">
      <view class="punch-list-title">上下班打卡</view>
      <view   
      v-for="(item,index) in punchInfo"
      :key="index">
      <view
        class="punch-list-item"
        @tap="goDetail(item.onAttendPunchRecordDO, 'work')"
      >
        <view class="punch-list-item-time">{{
          item.startPeriod ? item.startPeriod : "--"
        }}</view>
        <view :class="{ 'punch-list-item-right': true, border: index > 0 }">
          <view v-if="!item.onAttendPunchRecordDO">
            <view class="punch-list-item-text gray">上班</view>
          </view>
          <view v-else>
            <view
              class="punch-list-item-text"
              :class="{ abnormal:item.onAttendPunchRecordDO.punchStatus !== 1 }"
            >
              <!-- {{ ['', '上班打卡', '下班打卡'][onAttendPunchRecordDO.punchType] }} -->
              上班 ·{{
                ["缺卡", "正常", "迟到", "早退"][
                  item.onAttendPunchRecordDO.punchStatus
                ]
              }}（{{moment(item.onAttendPunchRecordDO.punchTime).format("HH:mm")}}）
            </view>
            <view
              class="punch-list-item-text small"
              :class="{ abnormal: item.onAttendPunchRecordDO.punchStatus !== 1 }"
            >{{ item.onAttendPunchRecordDO.local }}</view>
          </view>
          <uni-icons
            class="punch-list-item-icon"
            type="arrowright"
            size="16"
            color="#C0C0C0"
          />
        </view>
      </view>
      <view
        class="punch-list-item"
        @tap="goDetail(item.offAttendPunchRecordDO, 'work')"
      >
        <view class="punch-list-item-time">{{
          item.endPeriod ? item.endPeriod : "--"
        }}</view>
        <view :class="{ 'punch-list-item-right': true, border: index >= 0 }">
          <view v-if="!item.offAttendPunchRecordDO">
            <view class="punch-list-item-text gray">下班</view>
          </view>
          <view v-else>
            <view
              class="punch-list-item-text"
              :class="{ abnormal: item.offAttendPunchRecordDO.punchStatus !== 1 }"
            >
              <!-- {{ ['', '上班打卡', '下班打卡'][offAttendPunchRecordDO.punchType] }} -->
              下班 ·{{
                ["缺卡", "正常", "迟到", "早退"][
                  item.offAttendPunchRecordDO.punchStatus
                ]
              }}（{{moment(item.offAttendPunchRecordDO.punchTime).format("HH:mm")}}）
            </view>
            <view
              class="punch-list-item-text small"
              :class="{ abnormal: item.offAttendPunchRecordDO.punchStatus !== 1 }"
            >{{ item.offAttendPunchRecordDO.local }}</view>
          </view>
          <uni-icons
            class="punch-list-item-icon"
            type="arrowright"
            size="16"
            color="#C0C0C0"
          />
        </view>
      </view>
      </view>
      <!-- <view v-else class="punch-list">
        <view class="punch-list-title">上下班打卡</view>
        <view class="punch-list-item punch-list-none">本日没有打卡记录</view>
      </view> -->
    </view>
  </scroll-view>
</template>
<script>
import moment from "moment";
import { findPunchRecordReq, selectAttendYearMonth } from "@/services/punchcard";
import Calendar from "@/components/uni-calendar/uni-calendar.vue";
import UniIcons from "@/components/uni-icons/uni-icons.vue";
import { formatFullDate } from "@/utils/tools.js";
export default {
  name: "StatTab",
  components: {
    Calendar,
    UniIcons
  },
  data() {
    return {
      date: formatFullDate(new Date()),
      punchInfo: null,
      onAttendPunchRecordDO: null,
      offAttendPunchRecordDO: null,
      puncheddate: []
    };
  },
  computed: {
    listVisible: function() {
      // return (this.punchList && this.punchList.length > 0) || (this.outPunchList && this.outPunchList.length > 0)
      return this.punchList && this.punchList.length > 0;
    }
  },
  created() {
    this.findPunchRecord();
    this.getSelectAttendYearMonth(this.date);
  },
  methods: {
    moment,
    onDateChange(e) {
      this.date = e.fulldate;
      this.findPunchRecord();
    },
    findPunchRecord() {
      findPunchRecordReq(this.date)
        .then(res => {
          this.punchInfo = res;
          this.onAttendPunchRecordDO = res.onAttendPunchRecordDO;
          this.offAttendPunchRecordDO = res.offAttendPunchRecordDO;
        })
        .catch(err => {
          console.log("debug log --> ", err);
          uni.showToast({
            title: err,
            icon: "none",
            duration: 2000
          });
        });
    },
    goDetail(item, type) {
      uni.navigateTo({
        url: `/punchcard/detail?item=${encodeURIComponent(
          JSON.stringify(item)
        )}&date=${this.date}&type=${type}`
      });
    },
    onDatePNChange(date) {
      this.getSelectAttendYearMonth(date);
    },
    getSelectAttendYearMonth(date) {
      selectAttendYearMonth({
        year: date.split('-')[0],
        month: date.split('-')[1]
      })
        .then(res => {
          res.forEach(e => {
            this.puncheddate.push({date: e.timeDay, info: e.punchDayStatus})
          })
        })
        .catch(err => {
          console.log("debug log --> ", err);
          uni.showToast({
            title: err,
            icon: "none",
            duration: 2000
          });
        });
    }
  }
};
</script>
<style lang="scss"></style>
